import React, { Component } from 'react';
import { Popover } from 'antd';
import { WeaPopoverHrm, WeaNewScroll } from 'ecCom';

export default class StaticDepartment extends Component {
  hide = () => {
    this.refs.popoverdepartment &&
      this.refs.popoverdepartment.refs.tooltip.setState({ visible: false });
  };

  content = (list = []) => {
    const scrollProps = {};
    if (list && list.length > 6) {
      scrollProps.height = 196;
    }
    return (
      <div className="email-hrmlist">
        <WeaNewScroll
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaNewScroll@6upm8s`}
          {...scrollProps}
        >
          <ul>
            {list.map(user => (
              <li key={user.id}>
                <span className="name" title={user.lastname}>
                  <WeaPopoverHrm
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_WeaPopoverHrm@tiplfp@${user.id}`}
                  />
                  <a
                    href={`javaScript:openhrm(${user.typeValue || ''});`}
                    onClick={e => window.pointerXY(e)}
                  >
                    {user.showName}
                  </a>
                </span>
                <span className="jobtitle" title={user.jobtitlename}>
                  {user.jobtitlename}
                </span>
              </li>
            ))}
          </ul>
        </WeaNewScroll>
      </div>
    );
  };

  render() {
    const { data } = this.props;
    let popoverState = {
      ref: 'popoverdepartment',
      placement: 'bottomLeft',
      trigger: 'click',
      overlayClassName: 'email-popoverdepartment',
      content: this.content(data.users),
    };
    return (
      <Popover
        ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@gf2kcc`}
        {...popoverState}
      >
        {this.props.children}
      </Popover>
    );
  }
}
